<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>爱涂说ß</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="../static/css/bootstrap.css" rel="stylesheet">
    <link href="../static/css/page_style.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
    <!-- <link href="../static/css/bootstrap-responsive.css" rel="stylesheet"> -->

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">爱涂说ß</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="/">首页</a></li>
              <li><a href="#about">关于</a></li>
              <li><a href="#contact">联系</a></li>
            </ul>
            <ul class="nav pull-right">
              <li>
                <p>{{ user }}</p>
              </li>
              <li>
                <a href="/login/" onclick="$('#loginModal').modal();return false">登陆</a>
              </li>
              <li>
                <a href="/register/" onclick="$('#registerModal').modal();return false">注册</a>
              </li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">
      <div class="hero-unit">
        <h1>直观、有趣的分享</h1>
        <p><strong>爱涂说</strong>令你可以记录和分享涂鸦，和你的朋友一起来图画。你可以在涂说板上尽情绘画，可以在照片文档上圈点标注，可以与你的朋友互动讨论，过后还可以整个绘画讨论的过程分享给别人观看。</p><p>交流,原来可以如此简单。</p>
        <a href="/chat/" class="btn btn-large btn-primary" onclick="$('#chatTitleModal').modal();return false">开始涂说</a>
        <a href="/learnMore/" class="btn btn-large">了解更多</a>
      </div>
        <!--[if IE]>
          <div class="alert alert-error">
            您正在使用IE内核浏览器，为了使您能使用本应用的所有功能，我们建议您换用<a href="http://www.google.cn/intl/zh-CN/chrome/browser/">谷歌浏览器</a>
          </div>
        <![endif]-->

      <div class="row">
        <div class="span6">
          <h2>讨论室</h2>
          <p>在讨论室中，你可以邀请其他人一起参与涂说，共同讨论。</p>
          <a class="btn btn-large btn-primary" onclick="$('#chatTitleModal').modal();return false">进入</a>
        </div>
        <div class="span6">
          <h2>一言堂</h2>
          <p>在一言堂中，你可以邀请其他人仅仅作为观众，防止画布被弄乱。</p>
          <a class="btn btn-large btn-primary" onclick="$('#speechTitleModal').modal();return false">进入</a>
        </div>
      </div>


      <h2>最新动画</h2>
      <div class="row">
        {% for session in newest_sessions %}
        <div class="span4"><a href="/{{ session.type }}/{{ session.sessionid }}"><img class="thumbnail" src="{{session.cover}}" alt="{{ session.title }}"></a><a href="/{{ session.type }}/{{ session.sessionid }}">
            <h3>{{ session.title }}</h3>
          </a></div>
        {% end %}
      </div>


      <div class="modal hide fade" id="loginModal">
        <div class="modal-header">
          <h3>登陆</h3>
        </div>
        <div class="modal-body">
          <form action="/login/" id="login_form" method="post">
            <label>用户名</label>
            <input type="text" name="username" placeholer="你的用户名">
            <label>密码</label>
            <input type="password" name="password" placeholer="你的密码">
            <label class="checkbox">
              <input type="checkbox" name="remember_me">记住我
            </label>
            <!-- {{ xsrf_form_html() }} -->
          </form>
        </div>
        <div class="modal-footer">
          <a class="btn btn-primary" onclick="document.getElementById('login_form').submit(); return false">登陆</a>
          <a class="btn" onclick="$('#loginModal').modal('hide'); return false">取消</a>
        </div>
      </div>

      <div class="modal hide fade" id="registerModal">
        <div class="modal-header">
          <h3>注册</h3>
        </div>
        <div class="modal-body">
          <form action="/register/" id="register_form" method="post">
            <label>用户名</label>
            <input type="text" placeholder="中英文皆可" name="username">
            <label>密码</label>
            <input type="password" placeholder="大小写英文及数字，不少于8位" name="password">
            <label>重复密码</label>
            <input type="password" placeholder="请再输入一遍" name="password_again">
            <input type="hidden" name="nickname">
            <!-- {{ xsrf_form_html() }} -->
          </form>
        </div>
        <div class="modal-footer">
          <a class="btn btn-primary" onclick="document.getElementById('register_form').submit(); return false">注册</a>
          <a class="btn" onclick="$('#registerModal').modal('hide'); return false">取消</a>
        </div>
      </div>

      <div class="modal hide fade" id="chatTitleModal">
        <div class="modal-header">
          <h3>起个名字先</h3>
        </div>
        <div class="modal-body">
          <form action="/chat/" id="chat_title_form" method="get">
            <label>标题</label>
            <input type="text" placeholder="房间的名字" name="title" id="chat_title">
            <label>昵称</label>
            <input type="text" placeholder="你的昵称" name="nickname" value="{{ user }}">
            <!-- {{ xsrf_form_html() }} -->
          </form>
        </div>
        <div class="modal-footer">
          <a class="btn btn-primary" onclick="if(document.getElementById('chat_title').value!='') document.getElementById('chat_title_form').submit(); return false">确认</a>
          <a class="btn" onclick="$('#chatTitleModal').modal('hide'); return false">取消</a>
        </div>
      </div>

      <div class="modal hide fade" id="speechTitleModal">
        <div class="modal-header">
          <h3>起个名字先</h3>
        </div>
        <div class="modal-body">
          <form action="/speech/" id="speech_title_form" method="get">
            <label>标题</label>
            <input type="text" placeholder="房间的名字" name="title" id="speech_title">
            <label>昵称</label>
            <input type="text" placeholder="你的昵称" name="nickname" value="{{ user }}">
            <!-- {{ xsrf_form_html() }} -->
          </form>
        </div>
        <div class="modal-footer">
          <a class="btn btn-primary" onclick="if(document.getElementById('speech_title').value!='') document.getElementById('speech_title_form').submit(); return false">确认</a>
          <a class="btn" onclick="$('#speechTitleModal').modal('hide'); return false">取消</a>
        </div>
      </div>


      <hr>
      
      <footer>
        <p>&copy; quarkjoker 2012</p>
      </footer>
    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../static/js/jquery.js"></script>
    <script src="../static/js/bootstrap.js"></script>
    <script type="text/javascript">

    </script>
  </body>
</html>
